<template>
  <div class="app-container">
    <div class="right"  v-if="flag">
      <el-button type="primary" @click="flag=false">添加</el-button>
    </div>
    <a v-else style="color: #409EFF"><i style="margin-bottom: 20px" class="el-icon-arrow-left" @click="cancel">返回相册列表</i></a>
    <el-button v-if="!flag&&index>-1" style="position: fixed;right: 50px" :loading="loading" @click="del" >删除</el-button>
    <div v-if="flag"  style="display: flex;flex-wrap: wrap">
      <div v-for="(item,index) in data.albums" @click="edit(item,index)" style="margin-right: 20px;margin-bottom: 20px">
        <img style="margin-top: -1px;margin-left:-1px;width: 150px;height: 150px;border-radius: 6px"
             :src="item.pictures[0]" class="avatar">
        <div style="font-size: 15px">{{item.name}}</div>
      </div>
    </div>
    <el-form v-else ref="form" :rules="rules" :model="form" label-width="100px">
        <el-form-item label="相册名称：" prop="name">
          <el-input type="text" style="width: 400px" v-model="form.name" maxlength="10" show-word-limit/>
        </el-form-item>
        <el-form-item label="相册图片：" prop="pictures">
          <uploadimg :showFilelist="true" @setImg="setImg" @cover="cover" :fileList="fileList"/>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="onSubmit" >提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import uploadimg from '@/components/UploadImg/index.vue'
  import { updateAlbums } from '@/api/building'

  export default {
  props: {
    data: {
      type: Object,
      default: {}
    },
  },
  data() {
    const validatePictures = (rule, value, callback) => {
      if (!this.form.pictures.length) {
        callback(new Error('请上传图片'))
      } else {
        callback()
      }
    }
    return {
      loading:false,
      flag:true,
      index:-1,
      fileList:[],
      form: {
        name: '',
        pictures:[],
        queue:0
      },
      rules:{
        name: [
          { required: true, message: '请输入相册名称', trigger: 'blur' },
        ],
        pictures: [{ required: true, trigger: 'blur', validator: validatePictures }],
      }
    }
  },
  components:{
    uploadimg,
  },
  methods: {
    setImg(data){
      this.form.pictures.push(data)
    },
    cover(data){
      this.form.pictures=data
    },
    edit(item,index){
      this.form=JSON.parse(JSON.stringify(item))
      item.pictures.map(res=>{
        this.fileList.push({url:res})
      })
      this.flag=false
      this.index=index
    },
    del(){
      if(this.loading){
        return
      }
      this.$confirm('确认删除该相册？')
        .then(_ => {
          let data={}
          data.albums=JSON.parse(JSON.stringify(this.data.albums))
          data.buildingId=this.data.id
          data.token=this.data.token
          data.albums.splice(this.index,1)
          console.log(data,100)
          this.loading=true
          updateAlbums(data).then(res=>{
            this.$message.success('删除成功')
            this.data.albums=data.albums
            this.flag=true
          }).finally(
            this.loading=false
          )
        })
        .catch(_ => {});
    },
    cancel(){
      this.index=-1
      this.form={
        name: '',
        pictures:[],
        queue:0
      }
      this.fileList=[]
      this.flag=true
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let data={}
          data.albums=JSON.parse(JSON.stringify(this.data.albums))
          if(this.index>-1){
            data.albums.splice(this.index,1,this.form)
          }else{
            data.albums.push(this.form)
          }
          data.buildingId=this.data.id
          data.token=this.data.token
          this.$confirm('确认提交？')
            .then(_ => {
              this.loading=true
              updateAlbums(data).then(res=>{
                this.$message.success('提交成功')
                if(this.index>-1){
                  this.data.albums.splice(this.index,1,this.form)
                }else{
                  this.data.albums.push(this.form)
                }
                this.cancel()
              }).finally(
                this.loading=false
              )
            })
            .catch(_ => {});
        }
      });
    },
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

